﻿@namespace MudBlazor.Docs.Components.LandingPage

<div class="lp-effect phone-shadow" aria-hidden="true"></div>
<div class="lp-device phone">
    <div class="lp-device-screen">
        <div class="lp-app-scale">
            <div class="relative mud-height-full mud-width-full">
                <div class="lp-device-toolbar">
                    <div class="lp-time d-flex justify-start align-end ml-4">
                        <MudText Typo="Typo.subtitle1">@GetTime()</MudText>
                    </div>
                    <svg class="lp-phone-notch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.97 29.67">
                        <path d="M0,29.67A29.63,29.63,0,0,1,29.63,0H58a4.08,4.08,0,0,1,3.88,3.91V6.44a15.3,15.3,0,0,0,1.17,5.93,15.53,15.53,0,0,0,3.36,5,15.38,15.38,0,0,0,5,3.36A15.5,15.5,0,0,0,77.4,22H201.34a15.5,15.5,0,0,0,5.93-1.19,15.38,15.38,0,0,0,5-3.36,15.53,15.53,0,0,0,3.36-5,15.3,15.3,0,0,0,1.17-5.93V4.06h0A4.05,4.05,0,0,1,220.73,0h28.62A29.65,29.65,0,0,1,279,29.67Z"/>
                    </svg>
                    <div class="lp-device-info d-flex justify-end align-end">
                        <MudIcon Icon="@Icons.Material.Rounded.SignalCellularAlt"/>
                        <MudIcon Icon="@Icons.Material.Rounded.Wifi"/>
                        <MudIcon Icon="@Icons.Material.Rounded.BatteryFull"/>
                    </div>
                </div>
                <div class="lp-mini-app">
                    @if (IsCalculator)
                    {
                        <Calculator />
                    }else{
                        <MiniApp IsMobile="true"/>
                    }
                    <div class="phone-to-home d-flex justify-center align-center">
                        <MudIconButton Icon="@Icons.Material.Outlined.Circle" OnClick="ChangeApp" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code{

    public string GetTime()
    {
        var dateTime = DateTime.Now;
        int hour = dateTime.Hour;
        int minute = dateTime.Minute;
        
        return $"{hour}:{minute}";
    }

    private bool IsCalculator;

    private void ChangeApp()
    {
        IsCalculator = !IsCalculator;
    }
}